<script lang="ts" setup>
import { ref } from "vue";
import { useLayerDecorator,useLayerParamsDecorator } from "@/utils/GV_DrawFn/LayerDecorator";
import { useEarthGroup } from "@/utils/GV_DrawFn/EarthViewerGroup";
import { useEarthStore } from "@/stores/earthObj";
const store = useEarthStore();
import {Delete} from '@element-plus/icons-vue'


let viewer = store.getViewer();
let group = new useEarthGroup(viewer);

let useDecorator = new useLayerDecorator(viewer);
let paramsDecorator = new useLayerParamsDecorator();

let dataSource = ref([
  {
    id: 1,
    label: "图层",
    children: [
      {
        id: "1_0",
        label: "底图影像",
        visable: false,
        type: "wms",
        param: {
          url: "http://localhost:8210/service/wms",
          layers: "Global_Image-JPEG-4326",
          parameters: { format: "image/jpeg" },
          minimumLevel: 0,
          maximumLevel: 14,
        },
      },
      {
        id: "1_1",
        label: "地名地址",
        visable: false,
        type: "wmts",
        param: {
          url: "http://localhost:8210/service/wmts",
          layer: "Global_ImageLabel-PNG-4326",
          format: "image/png",
          minimumLevel: 0,
          version: "1.1.1",
          tileMatrixSetID: "EPSG:4326",
          style: "default",
          maximumLevel: 14,
        },
      },
      {
        id: "1_2",
        label: "地形",
        visable: false,
        type: "terrain",
        param: {
          url: "http://localhost:8210/service/terrain/Global_DEM-HeightMap-4326",
          requestVertexNormals: true,
        },
      },
      {
        id: "1_3",
        label: "3D模型",
        visable: false,
        type: "3DTile",
        param: {
          url: "http://localhost:5173/static/tile/tileset.json",
          isFlyTo: true,
        },
      },
      {
        id: "1_4",
        label: "天地图",
        visable: false,
        type: "xyz",
        param: {
          url: "/api/DataServer?T=cva_w&tk=key&x={x}&y={y}&l={z}",
        },
      },
      {
        id: "1_5",
        label: "地理数据",
        visable: false,
        type: "geo",
        param: {
          url: "http://localhost:5173/static/YNsheng.geojson",
          strokeColor: "#098",
          fillColor: "#98dd28",
          opacity: 0.2,
          isFlyTo: true,
          strokeWidth: 100,
        },
      },
      {
        id: "1_6",
        label: "加载模型",
        visable: false,
        type: "model",
        param: {
          url: "http://localhost:5173/static/Cesium_Air.glb",
          scale: 2.0,
          position: [-75.628985, 39.555726, 1000],
          isFlyTo: false,
        },
      },
    ],
  },
]);

const CheckChangeHandle = (row: any) => {
  row.visable = !row.visable;
  if (row.children) return false;
  let params = {
    visable: row.visable,
    id: row.id,
    ...row.param,
  };

  useDecorator.useMain(params, row.type);
};
</script>
<template>
  <div class="layerManage">
    <div class="layer_tree">
      <el-tree
        class="layerel_tree"
        :data="dataSource"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @check-change="CheckChangeHandle"
      >
        <template #default="{ node, data }">
          <div class="customNode">
            <div class="customLable">
              {{ node.label }}
            </div>
            <div class="customOperate">
              <el-icon><Delete /></el-icon>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<style scoped>
.customNode{
  width: 75%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.layerManage {
  position: absolute;
  right: 3%;
  top: 12%;
  border-radius: 6px;
  width: 300px;
  height: auto;
  z-index: 10;
}
.layer_tree {
  width: 100%;
  height: 500px;
  padding: 10px;
  background-color: rgba(37, 72, 128, 0.77);
}
.layerel_tree {
  background: none;
  color: #fff;
}
:deep(.el-tree-node__content:hover) {
  background-color: #09a;
}
:deep(.is-current) {
  background: #09a;
}
</style>
